<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>楚天名医</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style>
    	.mui-margin_{
    		margin-top: 40px !important;
    		padding: 0 50px 0 50px !important; 
    	}
    	.img-width{
    		width: 50px;
    		height: 50px;
    	}
    	.img-float_{
    		float: left;
    		margin-left: 40px;
    	}
    	.img-float_1{
    		float: left;
    		margin-left: 20px;
    	}
    	.img-float{
    		float: left;
    	}
    	.mui-media-body{
    		margin-top: 0px !important;
    	}
    	.mui-table-view-cell{
    		padding: 1px 16px !important;
    	}
    	.mui-table-view-cell_{
    		padding: 1px 10px !important;
    	}
    	.mui-ul{
    		width: auto !important;
    	}
    	.mui-margin_1{
    		margin:0 30px 0 30px !important;
    	}
    	.mui-title_{
    		white-space: normal !important;font-size: 12px !important;
    	}
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">楚天名医</h1>
    </header>
    <div>
	    <ul class="mui-table-view mui-grid-view mui-grid-9 mui-margin_" >
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
					<img src="img/TWWZ.png" class="img-width" />
		            <div class="mui-media-body">去问诊</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
		            <img src="img/YYWZ.png" class="img-width" />
		            <div class="mui-media-body">去挂号</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
		            <img src="img/MYZX.png" class="img-width" />
		            <div class="mui-media-body" >找医生</div>
		        </a>
		    </li>
	    </ul>
	</div>
    <div>
	    <ul class="mui-table-view mui-grid-view mui-grid-9" >
		    <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		        <a href="#">
					<img src="img/MYGZS.png" class="img-width img-float_1"  />
		            <div class="mui-media-body" style="width: 50%;white-space: normal !important;word-break: break-all;word-wrap: break-word;overflow: hidden;height: auto;margin-top: 10px !important;">
		            	<div style="margin-bottom: 4px;font-size: 13px;">名医工作室</div>
		            	<div style="font-size: 11px;">名医擅长领域、经典案例</div>
		            </div>
		            <!--<div class="mui-media-body" style="width: 30%;">工作室</div>-->
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		        <a href="#">
		            <img src="img/JKSC.png" class="img-width img-float" />
		            <div class="mui-media-body" style="width: 50%;white-space: normal !important;word-break: break-all;word-wrap: break-word;overflow: hidden;height: auto;margin-top: 10px !important;">
		            	<div style="margin-bottom: 4px;font-size: 13px;">积分商城</div>
		            	<div style="font-size: 11px;color: #EBA300;">最优惠、最实在</div>
		            </div>
		        </a>
		    </li>
		   
	    </ul>
	    <ul class="mui-table-view mui-grid-view mui-grid-9 mui-margin_1 mui-ul"  >
		    <li class="mui-table-view-cell mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3">
		        <a href="#">
					<img src="img/MYGZS.png" class="img-width "  />
		            <div class="mui-media-body mui-title_" >妇女频道</div>
		            <!--<div class="mui-media-body" style="width: 30%;">工作室</div>-->
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3">
		        <a href="#">
		            <img src="img/JKSC.png" class="img-width " />
		            <div class="mui-media-body mui-title_" >家庭医生</div>
		            <!--<div class="mui-media-body" >商城</div>-->
		        </a>
		    </li>
		   <li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3">
		        <a href="#">
					<img src="img/MYGZS.png"  class="img-width " />
		            <div class="mui-media-body mui-title_">曝光台</div>
		            <!--<div class="mui-media-body" style="width: 30%;">工作室</div>-->
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3">
		        <a href="#">
		            <img src="img/JKSC.png"  class="img-width " />
		            <div class="mui-media-body mui-title_" >健康圈</div>
		            <!--<div class="mui-media-body" >商城</div>-->
		        </a>
		    </li>
	    </ul>
	</div>
    <div id="slider" class="mui-slider" style="margin-top: 10px;">
      <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="img/BANNER.jpg">
          </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="img/BANNER.jpg">
          </a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="img/BANNER.jpg">
          </a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="img/BANNER.jpg">
          </a>
        </div>
        <!-- 第四张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="img/BANNER.jpg">
          </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="img/BANNER.jpg">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
      </div>
    </div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    幸福
                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    木屋
                    <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    CBD
                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                </div>
            </a>
        </li>
    </ul>
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
            <a class="mui-control-item mui-active">
                推荐
            </a>
            <a class="mui-control-item">
              热点
            </a>
            <a class="mui-control-item">
               北京
            </a>
            <a class="mui-control-item">
               社会
            </a>
            <a class="mui-control-item">
               娱乐
            </a>
            <a class="mui-control-item">
               科技
            </a>
        </div>
    </div>
	<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-phone"></span>
	        <span class="mui-tab-label">电话</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-email"></span>
	        <span class="mui-tab-label">邮件</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-gear"></span>
	        <span class="mui-tab-label">设置</span>
	    </a>
	</nav>
</body>
</html>